<template>
    <div class="homes" id="app">
      <div class="nine-top-box">
        <div class="banner">
          <div class="item" v-for="(item, i) in adList" :key="i">
            <a :href="item.url" target="_blank">
              <img loading="lazy" :src="`https://img.gameui.net/ad-${item.id}-${version(item.updateTime)}.webp`" alt="" />
            </a>
          </div>
        </div>
      </div>
      <!-- banner -->
      <!-- 内容 -->
      <div class="main nine-home-main">
        <div class="focus-search-container wp-1432" id="main_search" :class="{ 'focus-search': isFocus }">
          <form class="nine-home-search" onsubmit="return false;">
            <div class="left">
              <div class="n-h-s-type-nav">
                {{ globalSearchKeyTitle }}
                <div class="n-h-s-type-nav-sub-box">
                  <div class="n-h-s-type-nav-subs">
                    <a @click="globalSearchKeyTitle = '全站内容';globalSearchKeyType = ''">全站内容</a>
                    <a @click="globalSearchKeyTitle = '游戏截图';globalSearchKeyType = 'linggan'">游戏截图</a>
                    <a @click="globalSearchKeyTitle = '原创作品';globalSearchKeyType = 'discover'">原创作品</a>
                    <a @click="globalSearchKeyTitle = '文章';globalSearchKeyType = 'article'">文章</a>
                  </div>
                </div>
              </div>
              <input
                autocomplete="off"
                id="homeKeyBox"
                type="text"
                @keyup="handleBylikeSearch"
                @keypress.enter="handleGlobalSearch"
                v-model="globalKeyword"
                @focus="
                  isFocus = true
                  showSearchkeys = false
                "
                placeholder="搜索..."
              />
              <i class="common-icon-clear-inp" @click="handleClearGlobalkeyword" v-if="globalKeyword.length > 0"></i>
              <span class="n-h-s-icon-bar" @click="isFocus = false;showSearchkeys = true;handleGlobalSearch()"></span>
            </div>
            <div class="search-by-pic-box">
              <a class="search-by-pic" style="view-transition-name: cat1;contain: paint;" @click="isFocus=false;showSearchkeys=false;showPicToPic=true">以图搜图</a>
            </div>
            <div class="nie-global-search-result-box home-his-fix" v-show="isFocus && (searchData.length > 0 || browserData.length > 0) && globalSearchkeys.length == 0">
              <TopMaskContent/>
              <!-- <div class="wrapp-box">
                <div class="nbsrb-tit" v-if="searchData.length > 0">最近搜索</div>
                <div class="his-result-items" v-if="searchData.length > 0">
                  <span v-for="(str, idx) in searchData" :title="str" :key="idx" @click="handleSearchByCommkey(str)"
                    ><em>{{ str }}</em> <i class="iconfont el-icon-close" @click.stop="removeHis(idx, str)"></i
                  ></span>
                </div>
                <div class="nbsrb-tit" v-if="browserData.length > 0">最近浏览过的</div>
                <div class="his-result-items bs-result-items" v-if="browserData.length>0">
                    <a target="_blank"  v-for="(item,idx) in browserData" :href="item.pageurl">
                        <span :title="item.title" :key="'bstr_'+idx">
                        <img loading="lazy" :src="`https://img.gameui.net/url-${base64(item.picurl)}@1x39.webp`" :srcset="`https://img.gameui.net/url-${base64(item.picurl)}@2x39.webp 2x, https://img.gameui.net/url-${base64(item.picurl)}@3x39.webp 3x`" alt="" />
                        <em>{{item.title}}</em>
                        </span>
                    </a>
				</div>
              </div> -->
            </div>
  
            <div class="global-keyword-searchs global-keyword-searchs-top" v-if="globalSearchkeys.length > 0 && !showSearchkeys">
              <div class="searchs-item" v-for="(item, idx) in globalSearchkeys" :class="{ active: keySelectIndex == idx }" :key="idx" v-html="item.content" @click="changeSearchKey(item)"></div>
            </div>
          </form>
          <div class="nine-center-nav">
            <a class="n-c-n-item" target="_blank" :href="nav.url" v-for="(nav, idx) in navs" :key="idx">
              <span><img loading="lazy" :src="`https://img.gameui.net/ad-${nav.id}-${version(nav.updateTime)}.webp`" alt="" /></span>
              <div class="n-c-n-item-bot">
                <div class="b-tit">{{ nav.title }}</div>
                <div class="b-desc">{{ nav.description }}</div>
                <a class="b-find-btn">{{ nav.urlDescription }}</a>
              </div>
            </a>
          </div>
        </div>
        <div class="wp-1432 mgbox-1">
          <div class="nine-home-panel-header">
            <div class="n-h-pnl-h-left">
              <div class="tit">原创作品</div>
              <div class="tit-desc">作品质量高、完成度高、具有独特创意，更容易上首页推荐哦！</div>
            </div>
            <div class="n-h-pnl-h-right">
              <a href="/works" class="n-view-btn">查看全部</a>
            </div>
          </div>
          <!-- <ul class="new-works nine-home-new-works nine-home-new-works-pd ul-imgtxtq1">
            <li v-for="(item, i) in worksArticle" :key="i">
              <a target="_blank" :href="'/articleDetails/'+item.id" class="con">
                <div class="pic">
                  <img loading="lazy" :src="`https://img.gameui.net/article-${item.id}-${version(item.updateTime)}@1x456.webp`" :srcset="`https://img.gameui.net/article-${item.id}-${version(item.updateTime)}@2x456.webp 2x,https://img.gameui.net/article-${item.id}-${version(item.updateTime)}@3x456.webp 3x`" alt="" />
                  <div class="logs" v-if="item.new">
                    <div></div>
                    <div class="other-group">
                      <span class="new-icon"></span>
                    </div>
                  </div>
                  <div class="basic-info">
                    <span class="ss">{{ item.category && item.topCategory && item.category.parentId == item.topCategory.id ? item.categoryName : (item.category.parentName ? item.category.parentName + '-' : '') + item.categoryName }}</span>
                    <div class="news-tags" v-if="item.tagsList && item.tagsList.length > 0">
                      <img style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="" />
                    </div>
                  </div>
                  <span class="con-mask"> </span>
                </div>
                <div class="txt">
                  <span class="mini-cat-name">作品</span>
                  <h3>
                    <span class="title">{{ item.title }}</span>
                  </h3>
                  <div class="top">
                    <span class="name" :title="item.member.userName">
                      <a @click.stop="toPersonalCenter(item.member)">
                        <img :src="get_avatar_url(item.member, 1, 20)" :srcset="get_avatar_urls(item.member, 20)" :alt="item.member.userName" @error="onImgLoadError"/>
                        {{ item.member.userName }}
                      </a>
                    </span>
                    <div class="rr">
                      <span><i class="i1"></i>{{ item.praiseStr }}</span>
                      <span><i class="i2"></i>{{ item.seeStr }}</span>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          </ul> -->
          <ul class="games-data" :class="['small']">
                <li v-for="(item, idx) in worksArticle" :key="idx" class="dx-vd-item" :class="{'no-data':!item.id}">
                    <a class="fav-d-item" :href="'/work/'+item.id" target="_blank" v-if="item.id">
                    <div class="img-flex-box">
                        <div class="main-img">
                        <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                        </div>
                    </div>
                    <div class="bot-desc">
                        <span class="file-name">{{ item.title }}</span>
                    </div>
                    <div class="bot-author">
                        <a class="u" @click.stop="toUsercenter(item.member.id)">
                          <span class="img-box">
                              <img loading="lazy" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                          </span>
                          <span class="name">
                            {{ item.member.userName }}
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                              <i class="sm-tip" slot-content>{{tag.title}}</i>
                              <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                            </el-popover>
                          </span>
                        </a>
                        <div class="rt">
                        <span class="like-num">{{ item.praiseStr }}</span>
                        <div class="vnum">
                                {{ item.seeStr }}
                            </div>
                        </div>
                    </div>
                    </a>
                </li>
            </ul>
          <div class="new-pageation-btn" v-if="hasMore && isloadedArticle">
            <a @click="handleLoadingMore">加载更多</a>
          </div>
        </div>
        <div class="g-boxq1" style="padding-top: 89px; padding-bottom: 48px" v-if="fitCollections.length > 0">
          <div class="wp-1432 mgbox-2">
            <div class="nine-home-panel-header">
              <div class="n-h-pnl-h-left">
                <div class="tit">发现适合您的风格参考合辑</div>
                <div class="tit-desc">这里有你在别处找不到的最新最全的游戏截图资源库！</div>
              </div>
              <div class="n-h-pnl-h-right"></div>
            </div>
            <ul class="nine-home-covers">
              <li v-for="(item, idx) in fitCollections" :key="idx">
                <router-link :to="'/inspiration?style='+item.name">
                  <img loading="lazy" :src="`https://img.gameui.net/url-${base64(item.image)}@1x332.webp`" :srcset="`https://img.gameui.net/url-${base64(item.image)}@2x332.webp 2x, https://img.gameui.net/url-${base64(item.image)}@3x332.webp 3x`" alt="" />
                  <span loading="lazy" class="mask" :style="`background-color:rgb(145, 132, 131);background-image:url(https://img.gameui.net/url-${base64(item.image)}@1x332.webp)`"></span>
                  <div class="text-box">
                    <span class="tit">{{ item.name }}</span>
                    <span class="num">{{ item.articleNum }} 款游戏</span>
                  </div>
                </router-link>
              </li>
              <li class="empty" @click="toInspiration">
                <a>查看所有风格</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="nine-home-hot-container">
          <div class="wp-1432 mgbox-3">
            <div class="nine-home-panel-header">
              <div class="n-h-pnl-h-left">
                <div class="tit">热门游戏</div>
                <div class="tit-desc">我们精选了一些顶级游戏大作，丰富你的创意工作。</div>
              </div>
              <div class="n-h-pnl-h-right">
                <span class="page-prev" @click="handleHotGamePrevPage"></span>
                <span class="page-next" @click="handleHotGameNextPage"></span>
              </div>
            </div>
            <ul class="n-h-hot-games">
              <li v-for="(g, gdx) in hotGames" :key="gdx">
                <a target="_blank" :href="g.url">
                  <div class="img-box">
                    <img loading="lazy" :src="`https://img.gameui.net/ad-${g.id}-${version(g.updateTime)}@1x110.webp`" :srcset="`https://img.gameui.net/ad-${g.id}-${version(g.updateTime)}@2x110.webp 2x,https://img.gameui.net/ad-${g.id}-${version(g.updateTime)}@3x110.webp 3x`" alt="" />
                  </div>
                  <span class="tit">{{ g.title }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div v-if="advObj.id" class="n-home-adv" :style="`background-image:url(https://img.gameui.net/ad-${advObj.id}-${version(advObj.updateTime)}.webp)`">
          <div class="wp-1432">
            <div class="desc-tit">{{ advObj.title }}</div>
            <a class="start-go-op-btn" target="_blank" :href="advObj.url">{{ advObj.urlDescription }}</a>
          </div>
        </div>
        <div class="near-by-articles">
          <div class="wp-1432 mgbox-4">
            <div class="nine-home-panel-header">
              <div class="n-h-pnl-h-left">
                <div class="tit">最近的文章</div>
                <div class="tit-desc">案例研究、教程和资源</div>
              </div>
              <div class="n-h-pnl-h-right">
                <a href="/articles" class="n-view-btn">查看全部</a>
              </div>
            </div>
            <ul class="games-data" :class="['small']">
                <li v-for="(item, idx) in article" :key="idx" class="dx-vd-item" :class="{'no-data':!item.id}">
                    <a class="fav-d-item" :href="'/article/'+item.id" target="_blank" v-if="item.id">
                    <div class="img-flex-box">
                        <div class="main-img">
                        <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                        </div>
                    </div>
                    <div class="bot-desc">
                        <span class="file-name">{{ item.title }}</span>
                    </div>
                    <div class="bot-author">
                        <a class="u" @click.stop="toUsercenter(item.member.id)">
                        <span class="img-box">
                            <img loading="lazy" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                        </span>
                        <span class="name">
                          {{ item.member.userName }}
                          
                          <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                              <i class="sm-tip" slot-content>{{tag.title}}</i>
                              <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                            </el-popover>
                        </span>
                        </a>
                        <div class="rt">
                        <span class="like-num">{{ item.praiseStr }}</span>
                        <div class="vnum">
                                {{ item.seeStr }}
                            </div>
                        </div>
                    </div>
                    </a>
                </li>
            </ul>
          </div>
        </div>
        <div class="cooperative-partner">
          <div class="wp-1432">
            <div class="m-partner">
              <div class="cooperative-partner-tit">
                <h3>合作伙伴</h3>
              </div>
              <ul class="ul-imgq1">
                <li v-for="(item, i) in links" :key="i" v-if="item.type == 'image'">
                  <a target="_blank" :href="item.url" class="con">
                    <div class="pic">
                      <img loading="lazy" :src="`https://img.gameui.net/url-${base64(item.image)}@1x108.webp`" alt="" />
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
  
      <!-- 搜索遮罩 -->
      <div class="home-search-mask" @click="isFocus = false;showSearchkeys = true" v-if="isFocus"></div>
      <a-modal v-model="showPicToPic" destroyOnClose centered :footer="null"  :closable="false" width="670px">
        <PicToPicSearch @cancel="showPicToPic=false" @onsearch="onPicSearch"/>
      </a-modal>
    </div>
  </template>
  
  <script>
    require('../../../static/utils/slick.min.js')
  import SparkMD5 from 'spark-md5'
  import PicToPicSearch from '@/components/PicToPicSearch'
  import Vue from 'vue'
  import common from '../../../static/utils/common.js'
  import API from '../../../static/utils/API.js'
  import api from '@/api/api'
  import { parseTime } from '../../../static/utils/formatdate.js'
  
  import VueLazyloads from 'vue-lazyload'

  import TopMaskContent from '@/components/TopMaskContent'
  
  Vue.use(VueLazyloads, {
    preLoad: 1.3,
    error: require('@/assets/empty_loading.png'),
    loading: require('@/assets/empty_loading.png'),
    attempt: 1,
  })
  export default {
    name: 'homes',
    components: { PicToPicSearch,TopMaskContent},
    data() {
      return {
        isScrollShow:false,
        isScroll:false,
        showPicToPic: false,
        banImg: require('@/assets/202204/nav_home.jpg'),
        keySelectIndex: -1,
        showSearchkeys: false,
        globalSearchkeys: [],
        globalSearchKeyTitle: '全站内容',
        globalSearchKeyType: '',
        globalKeyword: '',
        hotGamePageNum: 1,
        isFocus: false,
        otherJoblist: [],
        jobDetails: {},
        inspirations: [],
        hasMore: true,
        isloadedArticle: false,
        gImg: require('../../assets/images/iconq10.png'),
        defaultAvatar: require('../../assets/images/imgl1.png'),
        /* 广告 */
        adList: [],
        /* 作品 */
        worksArticleParam: {
          pageNum: 1,
          pageSize: 12,
          categoryId: 1,
          isAsc: 'desc',
          orderByColumn: 'createTime',
          rank: '首页推荐',
        },
        worksArticle: [],
        worksArticleTotal: 0,
        worksArticleCurrentPage: 1,
        worksArticleTabIndex: 0,
        /* 灵感 */
        inspirationArticleParam: {
          pageNum: 1,
          pageSize: 3,
          categoryId: 22,
          rank: '首页推荐',
        },
        inspirationArticle: [],
        /* 文章 */
        articleParam: {
          pageNum: 1,
          pageSize: 3,
          categoryId: 9,
        },
        article: [],
        articleTotal: 0,
        articleCurrentPage: 1,
        articleTabIndex: 0,
        /* 设计师 */
        membersParam: {
          pageNum: 1,
          pageSize: 10,
        },
        members: [],
        /* 合作伙伴 */
        linksParam: {
          pageNum: 1,
          pageSize: 100,
        },
        searchTypeEnum: {
            'linggan': 'game',
            'articleImage': 'article',
            'discover': 'work',
            'video': 'sortVideo',
            '': ''
        },
        links: [],
        jobs: [],
        type: '',
        hotGames: [],
        navs: [],
        fitCollections: [],
        advObj: {},
        searchData: [],
        browserData: [],
        hotGameTotalPage: 0,
      }
    },
    async mounted() {
      $('#app').removeClass('is-scroll').addClass('is-game').addClass('is-gm-home');
      $('#app .pro-header .search-bx form').css('display','none');
      this.getHisData();
      this.getAdList(); //banner
  
      this.getWorksArticleList(); //首页推荐
  
      this.articleParam.isAsc = 'desc';
      this.articleParam.orderByColumn = 'createTime';
      this.articleParam.rank = '首页推荐';
  
      this.getArticleList(); //推荐文章
  
      this.getLinksList(); //合作伙伴
  
    //   if (window._bd_share_main) {
    //     window._bd_share_main.init()
    //   } else {
    //     window._bd_share_config = {
    //       common: {
    //         bdSnsKey: {},
    //         bdText: '',
    //         bdMini: '1',
    //         bdMiniList: false,
    //         bdPic: '',
    //         bdStyle: '1',
    //         bdSize: '24',
    //       },
    //       share: {},
    //     }
    //     const s = document.createElement('script')
    //     s.type = 'text/javascript'
    //     s.src = 'https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)
    //     document.body.appendChild(s)
    //   }
  
      this.queryHotGames();
  
      let res = await api.getHomeNavs();
      if (res.code == 0) {
        this.navs = res.data;
      }
      res = await api.getFitCollections();
      if (res.code == 0) {
        this.fitCollections = res.data;
      }
      res = await api.getHomeAdNew();
      if (res.code == 0) {
        this.advObj = res.data && res.data[0];
      }
  
      window.addEventListener('scroll',this.docScroll);

      this.$nextTick(() => {
        $('body,html').animate({ scrollTop: 0 }, 0);
      })
    },
    destroyed(){
        window.removeEventListener('scroll',this.docScroll);
    },
    methods: {
        docScroll(e){
            this.isFocus=false;
            this.showSearchkeys=false;
            $('#homeKeyBox').blur();
            let _scrollTop=document.documentElement.scrollTop;
            if(_scrollTop>0){
                if(!this.isScroll)
                {
                    $('#app').addClass('is-scroll');
                    this.isScroll=true;
                }
            }else{
                if(this.isScroll){
                    $('#app').removeClass('is-scroll');
                    this.isScroll=false;
                }
            }
            let top=$('.nine-home-search').offset().top;
            if(_scrollTop>=top)
            {
                if(this.isScrollShow==true)return;
                this.isScrollShow=true;
                $('#app .pro-header .search-bx form').css('display','flex');
            }else{
                if(this.isScrollShow==false)return;
                this.isScrollShow=false;
                $('#app .pro-header .search-bx form').css('display','none');
            }
        },
        loadError(e){
            e.target.removeAttribute('srcset');
        },
        onImgLoadError(e){
            e.target.src=this.defaultAvatar;
            e.target.srcset=this.defaultAvatar;
        },
      get_avatar_url(member={id:'', avatar:''}, n=1, w=30) {
        if (!member.id || !member.avatar) return this.defaultAvatar
        let hash = SparkMD5.hash(member.avatar).slice(0, 6)
        return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
      },
      get_avatar_urls(member={id:'', avatar:''}, w=30) {
        return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
      },
      onPicSearch(data) {
        console.log('onPicSearch:', data)
      },
      version(time) {
        let date = new Date(time)
        return date.getTime()
      },
      base64(str) {
        return Buffer.from(str).toString('base64').replace(/\//g, '%2F')
      },
      handleSearchByPic(e) {
        if (!window.localStorage.getItem('token')) {
          return this.$parent.showLogin({ loginType: 0 })
        }
        // 更改视图
        const displayNewImage = () => {
          e.target.style.display = 'none'
          this.isFocus = false
          this.showSearchkeys = false
          this.showPicToPic = true
        }
        // 浏览器不支持 View Transitions 时的回退方案：
        if (!document.startViewTransition) {
          return displayNewImage()
        }
        // 使用视图过渡
        document.startViewTransition(() => {
          return displayNewImage()
        })
      },
      handleClearGlobalkeyword() {
        this.globalSearchkeys = []
        this.globalKeyword = ''
      },
      toAddWord: function () {
        let token = localStorage.getItem('token')
        if (!token) {
          this.$parent.showLogin({ loginType: 0 })
          return
        }
        this.$router.push('/addWorks')
      },
      handleHotGamePrevPage() {
        if (this.hotGamePageNum == 1) {
          return
        }
        this.hotGamePageNum--
        this.queryHotGames()
      },
      handleHotGameNextPage() {
        if (this.hotGamePageNum == this.hotGameTotalPage) {
          return
        }
        this.hotGamePageNum++
        this.queryHotGames()
      },
      changeSearchKey(item) {
        this.globalKeyword = item.title
        this.nearHisAdd()
        this.getHisData()
  
        let curPath = this.$route.path
        if (this.globalSearchKeyType == 'linggan' && curPath == '/inspiration') {
          this.$parent.$refs['mainPage'].queryParams.title = this.globalKeyword
          this.$parent.$refs['mainPage'].changeFilterCapType(this.globalSearchKeyTitle == '图片集' ? 1 : 2)
        } else {
          let routeData = this.$router.resolve({
            path:this.searchTypeEnum[item.type]+'/'+item.id,
          })
          window.open(routeData.href, '_blank')
        }
      },
      async handleBylikeSearch(e) {
        let that = this
  
        if (!that.globalKeyword.trim() && e.key != 'ArrowLeft' && e.key != 'ArrowRight') {
          this.globalSearchkeys = []
          this.showSearchkeys = true
          return
        }
        if (!that.globalKeyword || e.key == 'ArrowLeft' || e.key == 'ArrowRight') {
          return
        }
        if (e.key == 'ArrowUp' || e.key == 'ArrowDown') {
          if (e.key == 'ArrowUp') {
            //上翻
            if (that.keySelectIndex == 0) {
              that.keySelectIndex = that.globalSearchkeys.length - 1
            } else {
              that.keySelectIndex--
            }
          } else if (e.key == 'ArrowDown') {
            //下翻
            if (that.keySelectIndex == that.globalSearchkeys.length - 1) {
              that.keySelectIndex = 0
            } else {
              that.keySelectIndex++
            }
          }
  
          that.globalKeyword = that.globalSearchkeys[that.keySelectIndex].title
        } else {
          if (e.target.value) {
            let res = await api.globalLikeSearchKeywor({
              type: this.globalSearchKeyType,
              keyword: e.target.value,
              pageNum: 1,
              pageSize: 6,
            })
            that.keySelectIndex = -1
            if (res.code == 0) {
              res.data.forEach((item) => {
                item.content = item.title.replace(new RegExp(`\(${e.target.value}\)`), '<em>' + e.target.value + '</em>')
              })
              this.globalSearchkeys = res.data
              this.showSearchkeys = false
            }
          } else {
            this.globalSearchkeys = []
            this.showSearchkeys = true
          }
        }
      },
      toLinkUrl(item) {
        if (item.url) {
          window.open(item.url, '_blank')
        }
      },
      toInspirationByStyle(item) {
        this.$router.push({ path: '/inspiration?style=' + item.name })
      },
      handleSearchByCommkey(str) {
        this.globalKeyword = str
        this.handleGlobalSearch()
      },
      removeHis(idx, str) {
        let hisSearchData = localStorage.getItem('NEARHISRESULT')
        hisSearchData = JSON.parse(hisSearchData)
        let removeTmpIdx = 0
        let removeIdx = -1
        hisSearchData.forEach((item) => {
          if (item == str) {
            removeIdx = removeTmpIdx
          }
          removeTmpIdx++
        })
        hisSearchData.splice(removeIdx, 1)
        this.searchData.splice(idx, 1)
        localStorage.setItem('NEARHISRESULT', JSON.stringify(hisSearchData))
      },
      toInfo(item) {
        let routeData = this.$router.resolve({
          path: '/articleDetails/' + item.id,
        })
        if (item.type == 2)
          routeData = this.$router.resolve({
            path: '/inspirationInfo/' + item.id,
          })
        window.open(routeData.href, '_blank')
      },
      getHisData() {
        let hisSearchData = localStorage.getItem('NEARHISRESULT')
        let hisBrowserData = localStorage.getItem('NEARBROWSERRESULT')
        if (hisSearchData) {
          hisSearchData = JSON.parse(hisSearchData)
          hisSearchData = hisSearchData.reverse()
        }
        if (hisBrowserData) {
          hisBrowserData = JSON.parse(hisBrowserData)
          hisBrowserData = hisBrowserData.reverse()
        }
        this.searchData = hisSearchData ? hisSearchData : []
        this.browserData = hisBrowserData ? hisBrowserData : []
      },
      toPersonalCenter(item) {
        //:href="'/personalCenter/'+item.member.id"
  
        let routeData = this.$router.resolve({
          path: '/personalCenter/' + item.id,
        })
        window.open(routeData.href, '_blank')
      },
      handleGlobalSearch() {
        //if(this.searchData.length==0||this.browserData.length==0)
        if (!this.globalKeyword) {
          layer.msg('请输入搜索关键词')
          return
        }
        this.nearHisAdd()
        this.getHisData()
        let routeData = this.$router.resolve({
          path: '/searchs?k=' + encodeURIComponent(this.globalKeyword) + '&t=' + this.globalSearchKeyType,
        })
        window.open(routeData.href, '_self')
        // this.$router.push({path:'/search?keyword='+this.globalKeyword+'&type='+this.globalSearchKeyType})
      },
      nearHisAdd() {
        let nearHisResults = localStorage.getItem('NEARHISRESULT')
        if (!nearHisResults) nearHisResults = []
        else {
          nearHisResults = JSON.parse(nearHisResults)
        }
        let that = this
        let has = nearHisResults.filter((r) => {
          return r == that.globalKeyword
        })
        if (nearHisResults.length >= 12) nearHisResults = nearHisResults.splice(1, 12)
        if (has.length == 0) {
          nearHisResults.push(that.globalKeyword)
        }
        localStorage.setItem('NEARHISRESULT', JSON.stringify(nearHisResults))
      },
      queryHotGames() {
        let prm = {
          pageNum: this.hotGamePageNum,
          pageSize: 16,
          orderByColumn: 'sort',
          isAsc: 'asc'
        }
        let that = this;
        api.getHotGames(prm).then((res) => {
          if (res.code == 0) {
            that.hotGames = res.data;
  
            let rsnum = res.total % 16;
            let tnum = rsnum == 0 ? res.total / 16 : parseInt(res.total / 16 + 1);
            that.hotGameTotalPage = tnum;
          }
        })
      },
      getTime(time) {
        return parseTime(time, '{y}-{m}-{d}')
      },
      async handleLoadingMore() {
        let token = localStorage.getItem('token')
        if (!token) {
          this.$parent.showLogin({ loginType: 0 });
          //$('#m-wins-new-login').show();
          return;
        }
        this.worksArticleParam.pageNum++
        this.getWorksArticleList()
      },
      getJoinViewStr(item) {
        let adata = []
        if (item.device) {
          adata.push(item.device)
        }
        if (item.categoryName) {
          adata.push(item.categoryName)
        }
        if (item.style) {
          adata.push(item.style)
        }
        return adata.join('-')
      },
      //getimgObj(item) {
      //  return {
      //    src: item.image,
      //    //src: `https://img.gameui.net/article-${item.id}@1x456.webp`,
      //    error: require("@/assets/empty_loading.png"),
      //    loading: require("@/assets/empty_loading.png"),
      //  };
      //},
      toArticleDetails: function (id) {
        let routeData = this.$router.resolve({ path: '/articleDetails/' + id })
        window.open(routeData.href, '_blank')
        // this.$router.push({
        // 	path: "/articleDetails/"+id
        // })
      },
      toInspiration() {
        this.$router.push('/inspiration')
      },
      recommendArticle: function () {
        this.articleTabIndex = 0
        this.articleParam.pageNum = 1
        this.articleCurrentPage = 1
        this.articleParam.isAsc = 'desc'
        this.articleParam.orderByColumn = 'createTime'
        this.articleParam.rank = '首页推荐'
        this.getArticleList()
      },
      newArticle: function () {
        this.articleTabIndex = 1
        this.articleParam.pageNum = 1
        this.articleCurrentPage = 1
        this.articleParam.isAsc = 'desc'
        this.articleParam.orderByColumn = 'createTime'
        delete this.articleParam.rank
        this.getArticleList()
      },
      toArticleList: function () {
        this.$router.push('/articleList')
      },
      toMembersList: function () {
        this.$router.push('/membersRank')
      },
      async touchHomeTab(index) {
        if (index == 2) {
          let token = window.localStorage.getItem('token')
          if (!token) {
            this.$parent.showLogin({ loginType: 0 })
            return
          }
        }
        this.worksArticleTabIndex = index
  
        this.hasMore = true
        this.worksArticle = []
  
        this.worksArticleParam.pageNum = 1
        this.worksArticleCurrentPage = 1
        if (index == 0) {
          this.worksArticleParam.isAsc = 'desc'
          this.worksArticleParam.orderByColumn = 'createTime'
          this.worksArticleParam.rank = '首页推荐'
        } else if (index == 1) {
          this.worksArticleParam.isAsc = 'desc'
          this.worksArticleParam.orderByColumn = 'createTime'
          delete this.worksArticleParam.rank
        } else {
          this.worksArticleParam.isAsc = 'desc'
          this.worksArticleParam.orderByColumn = 'createTime'
          delete this.worksArticleParam.rank
  
          let that = this
          common.requestPost(API.bloggerArticleList, that.worksArticleParam, function (result) {
            if (result.code == 0) {
              let totalPage = result.total % that.worksArticleParam.pageSize == 0 ? result.total / that.worksArticleParam.pageSize : parseInt(result.total / that.worksArticleParam.pageSize) + 1
              if (result.data && (result.data.length < that.worksArticleParam.pageSize || that.worksArticleParam.pageNum >= totalPage)) {
                that.hasMore = false
              } else {
                that.hasMore = true
              }
              let domainUrl=that.$imgdomainurl;
                result.data.map(item=>{
                    let _vtime=null;
                    if(item.updateTime){
                        _vtime=item.updateTime;
                    }else if(item.createTime){
                        _vtime=item.createTime;
                    }else if(item.create_time){
                        debugger
                        _vtime=item.create_time.replace('T',' ');
                    }
                    _vtime=Math.abs(new Date(_vtime).getTime());
                    let srcsets=[];
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                    item.srcsets=srcsets.join(',')
                    item.lazy={
                        src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                    }
                })
              that.worksArticle = result.data
              that.worksArticleTotal = result.total
            }
          })
          return
        }
        this.getWorksArticleList()
      },
      async getAdList() {
        var that = this
        let result = await api.adList({ orderByColumn: 'sort', isAsc: 'asc' })
  
        //common.requestPost(API.adList, {}, function(result) {
        that.adList = result.data
        that.$nextTick(() => {
          $('.banner').slick({
            dots: true,
            arrows: true,
            autoplay: true,
            slidesToShow: 1,
            autoplaySpeed: 5000,
            pauseOnHover: true,
          })
        })
        //})
      },
      // 每页显示的条数改变
      changeSizeWorksArticle(val) {
        this.worksArticleParam.pageSize = val // 改变每页显示的条数
        this.worksArticleParam.pageNum = 1 // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.worksArticleCurrentPage = 1
        this.getWorksArticleList() // 点击每页显示的条数时，显示第一页
      },
      // current-change用于监听页数改变，而内容也发生改变
      currentChangeWorksArticle(val) {
        this.worksArticleParam.pageNum = val // 改变默认的页数
        this.worksArticleCurrentPage = val
        this.getWorksArticleList() // 切换页码时，要获取每页显示的条数
  
        $('body,html').animate(
          {
            scrollTop: $('#mtab').offset().top - 80,
          },
          500
        )
      },
      async getWorksArticleList() {
        var that = this
        that.isloadedArticle = false;
        if (that.worksArticleTabIndex == 2) {
          // url = API.memberPraiseList
          //url = API.bloggerArticleList
          let result = await api.bloggerArticleList(that.worksArticleParam);

          let domainUrl=that.$imgdomainurl;
            result.data.map(item=>{
                let _vtime=null;
                if(item.updateTime){
                    _vtime=item.updateTime;
                }else if(item.createTime){
                    _vtime=item.createTime;
                }else if(item.create_time){
                    _vtime=item.create_time.replace('T',' ');
                }
                _vtime=Math.abs(new Date(_vtime).getTime());
                let srcsets=[];
                srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                item.srcsets=srcsets.join(',')
                item.lazy={
                    src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
            })
          let totalPage = result.total % that.worksArticleParam.pageSize == 0 ? result.total / that.worksArticleParam.pageSize : parseInt(result.total / that.worksArticleParam.pageSize) + 1
          if (result.data && (result.data.length < that.worksArticleParam.pageSize || that.worksArticleParam.pageNum >= totalPage)) {
            that.hasMore = false
          } else {
            that.hasMore = true
          }
  
          if (result.code == 0) {
            that.isloadedArticle = true
            that.worksArticle = []
            that.worksArticle = result.data
            that.worksArticleTotal = result.total
          }
        } else {
          let result = await api.articlelist(that.worksArticleParam);

          let domainUrl=that.$imgdomainurl;
                result.data.map(item=>{
                    let _vtime=null;
                    if(item.updateTime){
                        _vtime=item.updateTime;
                    }else if(item.createTime){
                        _vtime=item.createTime;
                    }else if(item.create_time){
                        _vtime=item.create_time.replace('T',' ');
                    }
                    _vtime=Math.abs(new Date(_vtime).getTime());
                    let srcsets=[];
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                    item.srcsets=srcsets.join(',')
                    item.lazy={
                        src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                    }
                })
          let totalPage = result.total % that.worksArticleParam.pageSize == 0 ? result.total / that.worksArticleParam.pageSize : parseInt(result.total / that.worksArticleParam.pageSize) + 1
          if (result.data && (result.data.length < that.worksArticleParam.pageSize || that.worksArticleParam.pageNum >= totalPage)) {
            that.hasMore = false
          } else {
            that.hasMore = true
          }
  
          if (result.code == 0) {
            that.isloadedArticle = true
            let old = this.worksArticle
  
            that.worksArticle = [...old, ...result.data]
            that.worksArticleTotal = result.total
          }
        }
  
        // common.requestPost(url, this.worksArticleParam, function(result) {
        // 	if (result.code == 0) {
  
        // 		that.worksArticle = []
        // 		that.worksArticle = result.data
        // 		that.worksArticleTotal = result.total
        // 	}
        // })
      },
      async getInspirationrticleList() {
        var that = this
        let result = await api.articlelist(that.inspirationArticleParam)
        //common.requestPost(API.articleList, this.inspirationArticleParam, function(result) {
  
        if (result.code == 0) {
          that.inspirationArticle = result.data
        }
        //})
      },
      // 每页显示的条数改变
      changeSizeArticle(val) {
        this.articleParam.pageSize = val // 改变每页显示的条数
        this.articleParam.pageNum = 1 // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.articleCurrentPage = 1
        this.getArticleList() // 点击每页显示的条数时，显示第一页
      },
      // current-change用于监听页数改变，而内容也发生改变
      currentChangeArticle(val) {
        this.articleParam.pageNum = val // 改变默认的页数
        this.articleCurrentPage = val
        this.getArticleList() // 切换页码时，要获取每页显示的条数
  
        $('body,html').animate(
          {
            scrollTop: $('#mtab2').offset().top - 80,
          },
          500
        )
      },
      async getArticleList() {
        var that = this
        let result = await api.articlelist(that.articleParam)
  
        //common.requestPost(API.articleList, this.articleParam, function(result) {
  
        if (result.code == 0) {
        let domainUrl=that.$imgdomainurl;
        result.data.map(item=>{
            let _vtime=null;
            if(item.updateTime){
                _vtime=item.updateTime;
            }else if(item.createTime){
                _vtime=item.createTime;
            }else if(item.create_time){
                debugger
                _vtime=item.create_time.replace('T',' ');
            }
            _vtime=Math.abs(new Date(_vtime).getTime());
            let srcsets=[];
            srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
            srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
            srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
            item.srcsets=srcsets.join(',')
            item.lazy={
                src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
        })
          that.article = result.data;
        //   that.article.forEach((f) => {
        //     let sumary = f.content.replace(/\<[^>]*\>(([^<])*)/g, function () {
        //       let mark = ''
        //       return arguments[1]
        //     })
        //     f.content = sumary.substring(0, 200)
        //   })
          that.articleTotal = result.total
        }
        //})
      },
      async getMembersList() {
        var that = this
        this.membersParam['orderByColumn'] = 'see'
        this.membersParam['isAsc'] = 'desc'
        let result = await api.membersRank(that.membersParam)
        //common.requestPost(API.membersRank, this.membersParam, function(result) {
  
        if (result.code == 0) {
          that.members = result.data
        }
        //})
      },
      async getLinksList() {
        var that = this
        let result = await api.linksList(that.linksParam)
        //common.requestPost(API.linksList, this.linksParam, function(result) {
  
        that.links = result.data
        //})
      },
      getUrlKey(name, url) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ''])[1].replace(/\+/g, '%20')) || null
      },
      touchToDesigner: function (id) {
        this.$router.push({
          path: '/personalCenter/' + id,
        })
      },
    }
  }
  </script>
  
  <style scoped lang="less">
  .nine-home-search {
    // width:1022px;
    background: inherit;
    padding: 0px;
    display: flex;
    .left {
      flex: 1;
      background: #fff;
      display: flex;
      border-radius: 32px;
      align-items: center;
      height: 64px;
      padding: 4px;
      transition: 0.75s all linear;
    }
    .search-by-pic-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180px;
      height: 64px;
      padding-left: 12px;
    }
    .search-by-pic {
      display: block;
      cursor: pointer;
      user-select: none;
      line-height: 64px;
      width: 151px;
      min-width: 151px;
      text-align: center;
      border-radius: 32px;
      background-image: url('../../assets/icon_pic_to_pic_btn.svg');
      background-repeat: no-repeat;
      background-color: #fff;
      background-position:30px center;
      border: none;
      height: 64px;
      font-size: 14px;
      transition: 0.2s all linear;
      padding-left:30px;
      cursor: pointer;
      //margin-left: 12px;
    }
  }
  
  .ul-imgtxtq3 .pic img {
    width: 100% !important;
    height: 100% !important;
  }
  
  .ul-imgtxtq3 .tit span {
    margin-left: 5px;
  }
  
  .ul-imgtxtq2 .desc {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  
  .new-inspirations li {
    width: 33.3%;
  }
  .new-inspirations li {
    padding: 0px 13px;
  }
  
  .new-pageation-btn {
    text-align: center;
    margin-bottom: 51px;
    clear: both;
  }
  .new-pageation-btn a {
    line-height: 44px;
    height: 44px;
    width: 132px;
    text-align: center;
    border: 1px solid #efefef;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
    background: #11ccb1;
    color: #fff;
    font-size: 14px;
  }
  
  .new-pageation-btn a:hover {
    background: #11CCB1;
  }
  
  .ul-imgtxtq1 .pic .logs {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    z-index: 1;
    height: 40px;
    padding: 10px 0px 0px 10px;
    display: flex;
    justify-content: space-between;
    transition: 0.2s all linear;
  }
  .ul-imgtxtq1 .pic .logs span {
    display: inline-block;
  }
  .ul-imgtxtq1 .pic .logs .video-icon {
    width: 38px;
    height: 24px;
    background: url('../../assets/logs_video.png') no-repeat;
  }
  
  .ul-imgtxtq1 .pic .logs .new-icon {
    width: 16px;
    height: 16px;
    background: url('../../assets/nine/n.png') no-repeat;
  }
  .ul-imgtxtq1 .pic .logs .hot-icon {
    width: 35px;
    height: 22px;
    background: url('../../assets/logs_hot.png') no-repeat;
  }
  
  .ul-imgtxtq1 .pic .logs .other-group span {
    margin-right: 10px;
  }
  .new-jobs li {
    height: 129px;
  }
  .new-jobs li .title-row span {
    font-size: 18px;
    font-weight: bold;
  }
  .new-jobs li .title-row span:first-child {
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    text-overflow: ellipsis;
    width: 58%;
  }
  .new-jobs li .title-row span:first-child:hover {
    color: #6f6f6f;
  }
  .new-jobs li .title-row .money {
    color: #f41c1d;
    float: right;
  }
  .new-jobs .addr-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    font-size: 14px;
    color: #7f7f7f;
    font-weight: 500;
  }
  .new-jobs .addr-row span {
    font-size: 14px;
    color: #7f7f7f;
  }
  .new-jobs .addr-row img {
    margin-right: 5px;
  }
  .new-jobs .addr-row > div {
    margin-right: 40px;
  }
  .new-jobs .addr-row > div,
  .new-jobs .addr-row > span {
    display: flex;
    align-items: center;
  }
  .new-jobs .user-row {
    display: flex;
    padding-top: 20px;
    align-items: center;
  }
  .new-jobs .user-row img {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin-right: 10px;
  }
  .new-jobs .user-row em {
    font-size: 12px;
    font-weight: 500;
    color: #000;
  }
  .new-jobs-header {
    height: 42px;
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .new-jobs-header h3 {
    line-height: 42px;
    font-weight: normal !important;
  }
  
  .g-titq2 h3 {
    color: #808080;
    font-weight: normal !important;
  }
  
  .ul-imgtxtq2 h3 {
    font-size: 18px;
  }
  .ul-imgtxtq1 .name {
    font-weight: 500;
  }
  .tp-bottom {
    color: #aaa;
  }
  .g-titq1 h3 {
    color: #808080;
  }
  .ul-txtq1 li a {
    padding-bottom: 0px;
    line-height: 42px;
  }
  .new-inspirations li .txt .top > span:first-child {
    font-size: 18px;
  }
  .new-inspirations li .pic {
    margin-bottom: 3px;
  }
  .nine-home-panel-header {
    display: flex;
    align-content: center;
    justify-content: space-between;
    justify-items: center;
    margin-bottom: 4px;
  }
  .nine-home-panel-header .tit {
    font-size: 36px;
    font-weight: bold;
    color: #000;
  }
  .nine-home-panel-header .tit-desc {
    font-size: 16px;
    color: #596080;
    margin-top: 2px;
  }
  .n-view-btn {
    line-height: 44px;
    width: 104px;
    border-radius: 6px;
    text-align: center;
    color: #fff;
    height: 44px;
    background: #11ccb1;
    display: inline-block;
    font-size: 16px;
    transition: 0.3s all linear;
  }
  .n-h-pnl-h-right {
    display: flex;
    align-items: center;
  }
  .n-h-pnl-h-right .page-prev {
    width: 52px;
    height: 52px;
    background: url('../../assets/nine/pageNavPrev.png') no-repeat;
    background-size: cover;
    cursor: pointer;
  }
  .n-h-pnl-h-right .page-prev:hover {
    background: url('../../assets/nine/pageNavNext.png') no-repeat;
    background-size: cover;
    transform: rotate(-180deg);
  }
  .n-h-pnl-h-right .page-next {
    width: 52px;
    height: 52px;
    background: url('../../assets/nine/pageNavPrev.png') no-repeat;
    background-size: cover;
    cursor: pointer;
    transform: rotate(-180deg);
    margin-left: 23px;
  }
  .n-h-pnl-h-right .page-next:hover {
    background: url('../../assets/nine/pageNavNext.png') no-repeat;
    background-size: cover;
    transform: rotate(0deg);
  }
  .n-view-btn:hover {
    background: #11CCB1;
  }
  
  .nine-home-covers {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    grid-gap:32px;
  }
  .nine-home-covers li {
    // width: 334px;
    width:calc((100% - 96px) / 4);
    position: relative;
    // margin-right: 32px;
    // margin-bottom: 40px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.1s all linear;
    border: 2px solid transparent;
    height: 312px;
  }
  .nine-home-covers li:nth-child(4n) {
    margin-right: 0px;
  }
  .nine-home-covers li:hover {
    border: 2px solid #11CCB1;
    box-shadow: 0px 0px 4px 0px #11CCB1;
  }
  
  .nine-home-covers li img {
    height: 100%;
    width: 100%;
  }
  .nine-home-covers li .text-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0px;
    height: 60px;
    left: 0px;
    right: 0px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(114, 102, 104, 0.3);
    padding: 8px 16px;
    color: #fff;
    backdrop-filter: blur(15px);
  }
  .nine-home-covers li .mask {
    height: 77px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    filter: blur(15px);
    background-color: rgb(202, 197, 157);
    transform: scaleY(-1);
  }
  .nine-home-covers li .text-box .tit {
    font-size: 20px;
  }
  .nine-home-covers li .text-box .num {
    font-size: 14px;
  }
  .nine-home-covers li.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding-top:0px;
  }
  .nine-home-covers li.empty a {
    background: url('../../assets/nine/go_arrow_right_2.png') no-repeat;
    background-size: 11px 10px;
    background-position: 100% 9px;
    padding-right: 20px;
    font-size: 18px;
  }
  
  .nine-home-covers li.empty:hover a {
    color: #11ccb1;
    background: url('../../assets/nine/go_arrow_right.png') no-repeat;
    background-size: 11px 10px;
    background-position: 100% 9px;
    padding-right: 20px;
    font-size: 18px;
  }
  .nine-home-covers li:hover img {
    transform: scale(1.08);
  }
  
  .n-h-hot-games {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    grid-gap:18px;
  }
  .n-h-hot-games li {
    // margin-right: 17px;
    // width: 164px;
    width:calc((100% - 126px) / 8);
    border-radius: 12px;
    border: 1px solid #eee;
    // margin-bottom: 18px;
    text-align: center;
    cursor: pointer;
    // padding-bottom: 10px;
    transition: 0.3s all linear;
  }
  .n-h-hot-games li:nth-child(8n) {
    margin-right: 0px;
  }
  .n-h-hot-games li .img-box {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    display: block;
    margin-top: 20px;
    object-fit: cover;
    border-radius: 22px;
    overflow: hidden;
  }
  .n-h-hot-games li .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .n-h-hot-games li .tit {
    margin: 10px 0px;
    display: block;
    font-size: 16px;
    transition: 0.3s all linear;
  }
  .n-h-hot-games li:hover .tit {
    color: #11ccb1;
  }
  .n-h-hot-games li:hover img {
    transform: scale(1.08);
  }
  
  .nine-home-hot-container {
    padding: 90px 0px;
  }
  .n-home-adv {
    height: 380px;
    background-size: cover;
    background-repeat:no-repeat;
  }
  .n-home-adv .start-go-op-btn {
    background-color: #fff;
    color: #000;
    background-image: url('../../assets/nine/go_arrow_right_2.png');
    background-repeat: no-repeat;
    background-position: 88% 24px;
    width: 156px;
    line-height: 54px;
    height: 54px;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    box-sizing: border-box;
    border-radius: 12px;
    display: flex;
    align-items: center;
    user-select: none;
    justify-content: center;
    transition: 0.3s all linear;
  }
  .n-home-adv .start-go-op-btn:hover {
    background-color: #e7fffc;
  }
  .n-home-adv .desc-tit {
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 56px;
    color: #fff;
    padding-top: 78px;
    max-width: 900px;
    line-height: 55px;
  }
  
  .near-by-articles {
    padding: 90px 0px 0px 0px;
  }
  .near-by-articles .wp-1432 {
    border-bottom: 1px solid #efeded;
    padding-bottom: 43px;
  }
  .cooperative-partner {
    padding: 79px 0px 68px 0px;
  }
  .cooperative-partner-tit {
    font-size: 24px;
    font-weight: bold;
  }
  
  .cooperative-partner-tit h3 {
    color: #000;
    font-size: 24px;
  }
  .ul-imgtxtq1 .top {
    margin-top: 22px;
  }
  
  .nine-home-new-works-pd {
    margin-bottom: 0px;
  }
  
  .nine-home-main {
    top: -225px;
    position: relative;
  }
  
  .nine-home-main .mgbox-1 {
    margin-top: 80px;
  }
  </style>
  